<script setup lang="ts">
import { ref } from "vue";
import KFullDialog from "../../components/KFullDialog.vue";
import { useCreateSecret } from "./createProvider";
import SecretMetadata from "./SecretMetadata.vue";
import KMetadataEditForm from "../../components/KMetadataEditForm.vue";
import SecretDataEditor from "./SecretDataEditor.vue";
import YamlDialog from "../../components/YamlDialog.vue";

const { dialogVisible, editModel, closeEditor, submitCreateForm } =
  useCreateSecret();

const progressIndex = ref(0);
const metadataForm = ref();

const switchToDataEdit = () => {
  metadataForm.value?.validate((valid: boolean) => {
    if (valid) {
      progressIndex.value = 1;
    }
  });
};
</script>

<template>
  <KFullDialog
    v-model="dialogVisible"
    class="dialog-wrapper"
    title="创建Secret"
    :before-close="progressIndex = 0"
  >
    <template #header>
      <div class="flex justify-between">
        <span>创建Secret</span>
        <YamlDialog v-model:value="editModel" icon="Edit" />
      </div>
    </template>
    <div class="dialog-body">
      <el-steps align-center class="edit-step" :active="progressIndex">
        <el-step title="基本信息" />
        <el-step title="数据设置" />
      </el-steps>

      <div v-if="editModel?.metadata" class="flex-1 mt-3">
        <KMetadataEditForm
          v-if="progressIndex === 0"
          ref="metadataForm"
          v-model:model-value="editModel.metadata"
        />
        <SecretDataEditor
          v-else-if="progressIndex === 1"
          v-model:model-value="editModel"
        />
        <el-empty v-else />
      </div>
    </div>
    <template #footer>
      <div>
        <el-button plain @click="closeEditor">取消</el-button>
        <el-button v-if="progressIndex > 0" plain @click="progressIndex--">
          上一步
        </el-button>
        <el-button v-if="progressIndex < 1" plain @click="switchToDataEdit">
          下一步
        </el-button>
        <el-button
          v-if="progressIndex === 1"
          type="primary"
          @click="submitCreateForm"
        >
          提交
        </el-button>
      </div>
    </template>
  </KFullDialog>
</template>
<style lang="scss" scoped>
.dialog-wrapper {
  height: calc(100vh - var(--el-dialog-margin-top) * 3);
  display: flex;
  flex-direction: column;
  .el-dialog__header {
    height: 3rem;
    flex-shrink: 0;
  }

  .el-dialog__footer {
    height: 3rem;
    flex-shrink: 0;
  }
}
.dialog-body {
  --bg-color: var(--el-bg-color); // var(--el-fill-color-light);
  flex: 1;
  display: flex;
  flex-direction: column;

  background-color: var(--bg-color);

  .edit-step {
    background-color: var(--bg-color);
  }
}
</style>
